<template>
  <el-container>
    <el-header style="height: 75px">
      <div class="left">
        <img src="../assets/logo3.jpg" alt="" />
        <span>北京振涛教育 | 在线教学管理平台</span>
      </div>
      <div class="right">
        <el-dropdown>
          <span class="el-dropdown-link">
            <span>欢迎：</span>
            {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-switch-button" @click.native="handleLoginOut()">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside width="220px">
        <el-menu
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          router
          :default-active="$store.state.activeName"
          @select="handleSelect"
        >
          <template v-for="route in routes">
            <el-menu-item
              v-if="!route.children"
              :key="route.path"
              :index="route.path"
            >
              <i :class="route.meta.icon"></i>
              <span>{{ route.meta.title }}</span>
            </el-menu-item>

            <el-submenu v-else :key="route.path" :index="route.path">
              <template slot="title">
                <i :class="route.meta.icon"></i>
                <span>{{ route.meta.title }}</span>
              </template>

              <el-menu-item
              v-for="subroute in route.children"
              :key="subroute.path"
              :index="subroute.path"
              >
              <span>{{ subroute.meta.title }}</span>
            </el-menu-item>

            </el-submenu>
          </template>
        </el-menu>
      </el-aside>
      <el-main>
        <Nav></Nav>
        <div class="main">
          
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Nav from '../components/Nav'
import {UserInfo,LoginOut} from '@/utils/login'
export default {
  name: 'Index',
  data() {
    return {
      username:'',
      activeMenu:''
    }
  },
  created(){
    let userinfo=UserInfo()
    this.username=userinfo.username
    let activeMenu=window.localStorage.getItem('path')
    this.$store.commit('handleTab',activeMenu)
  },
  computed: {
    routes() {
      return this.$router.options.routes[1].children.filter(item=>{
        return item.meta.is_show!==false
      })
    },
  },
  components: {
    Nav,
  },
  methods: {
    handleLoginOut(){
      LoginOut()
    },
    handleSelect(index,path){
      this.$store.commit('handleTab',index)
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
.el-header {
  // background-color: #3B83C3;
  background-color: #5a9cf8;
  color: #ffffff;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  .left {
    padding: 2px 0px;
    display: flex;
    font-size: 20px;
    font-weight: bolder;
    align-items: center;
    img {
      height: 80%;
    }
    span{
      margin-left: 5px;
      font-size: 28px;
    }
  }
  .right {
    height: 100%;
    line-height: 50px;
    .el-dropdown-link {
      color: #ffffff;
      line-height: 75px;
      font-size: 18px;
    }
  }
}

.el-aside {
  background-color: #fff !important;
  // .el-menu {
  //   height: 100%;
  // }
}

.el-main {
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
  padding: 0;

  .main {
    // width: 100%;
    // height: 100%;

    overflow: auto;
    background-color: #f1f1f1;
    padding: 20px 20px 0px 20px;
    box-sizing: border-box;
    padding-bottom: 100px;
    
  }
}

.el-container {
  height: 100%;
  overflow: hidden;
}
</style>

